const API = require('../../utils/api.js')
Page({
  data: {
    articleList: [],
    searchKey: '',
    currentCategory: '1',
    currentCategoryList: [
      {
        name: '技术讨论',
        value: '1'
      },
      {
        name: '约球交友',
        value: '2'
      },
      {
        name: '赛事评论',
        value: '3'
      },
      {
        name: '装备交流',
        value: '4'
      },
      
    ],
    page: 1,
    hasMore: true,
    loading: false,
    // Tab选项卡相关
    indicatorPosition: 0,
    indicatorWidth: 0
  },

  onLoad() {
    this.loadPosts()
    // 初始化Tab指示器
    setTimeout(() => {
      this.updateTabIndicator()
    }, 100)
  },

  onShow() {
    if (typeof this.getTabBar === 'function' && this.getTabBar()) {
      this.getTabBar().setData({
        selected: 3
      })
    }
  },

  onSearch(e) {
    this.setData({ searchKey: e.detail.value })
    this.loadPosts()
  },

  // 切换分类
  switchCategory(e) {
    const category = e.currentTarget.dataset.category
    this.setData({ currentCategory: category })
    // 计算并设置指示器位置和宽度
    this.updateTabIndicator()
    // 加载帖子
    this.loadPosts()
  },
  
  // 更新Tab选项卡指示器
  updateTabIndicator() {
    // 获取屏幕宽度，计算每个Tab的宽度
    const windowWidth = wx.getSystemInfoSync().windowWidth
    // 减去左右padding和内边距
    const padding = 40 // 左右各20rpx
    
    // 根据实际分类数量计算tab宽度
    const categoryCount = this.data.currentCategoryList.length
    const tabWidth = (windowWidth - padding) / categoryCount
    
    // 计算指示器位置
    let position = 0
    // 在currentCategoryList中查找当前选中的分类索引
    const index = this.data.currentCategoryList.findIndex(item => item.value === this.data.currentCategory)
    
    if (index !== -1) {
      // 考虑padding和tab间距
      const startPadding = 20 // 左侧padding
      position = startPadding + index * tabWidth
    }
    
    this.setData({
      indicatorPosition: position,
      indicatorWidth: tabWidth
    })
  },

  goToDetail(e) {
    const id = e.currentTarget.dataset.id
    wx.navigateTo({
      url: `/pages/article-detail/article-detail?id=${id}`
    })
  },

  loadMore() {
    this.loadPosts(false)
  },

  onPullDownRefresh() {
    // 重新加载帖子数据，但不立即停止下拉刷新
    this.loadPosts()
  },
  
  // 优化后的加载帖子方法，包含下拉刷新处理
  loadPosts(reset = true) {
    if (reset) {
      this.setData({ page: 1, hasMore: true })
    }
    if (!this.data.hasMore && !reset) return
    this.setData({ loading: true })
    API.articleCollectio({
      pageNum: this.data.page,
      pageSize: 10,
      title: this.data.searchKey,
      articleType: this.data.currentCategory
    }).then(res=>{
      const newPosts = res.records || []
      const hasMore = newPosts.length === 10
      this.setData({
        articleList: reset ? newPosts : [...this.data.articleList, ...newPosts],
        hasMore,
        page: this.data.page + 1,
        loading: false
      })
      // 停止下拉刷新动画
      if (wx.stopPullDownRefresh) {
        wx.stopPullDownRefresh()
      }
    }).catch(err=>{
      console.error('加载帖子失败:', err)
      wx.showToast({
        title: '加载失败',
        icon: 'none'
      })
      this.setData({ loading: false })
      // 即使失败也停止下拉刷新动画
      if (wx.stopPullDownRefresh) {
        wx.stopPullDownRefresh()
      }
    })
  },

  onShareAppMessage() {
    return {
      title: '网球爱好者交流平台',
      path: '/pages/forum/forum',
      imageUrl: '/images/share-forum.jpg'
    }
  },
  
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
    // 当页面滚动到底部时，加载更多数据
    this.loadMore()
  }
})